<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理-车速递</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/mymain.mymain.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script type="application/javascript" src="../js/vue.min.js"></script>

</head>
<body style="position: static">

<div id="app" class="bgGray">
    <div data-v-95ac8d30="" class="header3">
        <div data-v-95ac8d30="" class="layout clear">
            <div data-v-95ac8d30="" class="left logo">
                <a data-v-95ac8d30="" href="loginSuccess">
                    <img data-v-95ac8d30="" src="">
                </a>
            </div> <div data-v-95ac8d30="" class="header3Nav right">|
            <a data-v-95ac8d30="" href="mymain">我的订单</a>|
            <a data-v-95ac8d30="" href="helpCenter.html">帮助中心</a>|
            <a data-v-95ac8d30="" href="loginSuccess">退出</a>
        </div>
            <div data-v-95ac8d30="" class="header3User right">
                <i data-v-95ac8d30="" class="iconfont icon-phone"></i>
            <span data-v-95ac8d30="" class="sp1">400-919-8000</span>
            <span data-v-95ac8d30="" class="sp2">欢迎您，</span>
            <span data-v-95ac8d30="" class="sp3"></span>
        </div>
        </div>
    </div>
    <div class="userInfo">
        <div class="layout">
            <div class="userInfoCom clear">
                <div class="userInfoL left">
                    <div data-v-1cae2c34="" class="userNav">
                        <dl data-v-1cae2c34="" class="userMsg">
                            <dt data-v-1cae2c34="">
                                <img data-v-1cae2c34="" src="">
                            </dt>
                            <dd data-v-1cae2c34="">
                                <p data-v-1cae2c34=""></p>
                                <p data-v-1cae2c34="" class="p5 pp" style="">普卡会员</p>
                            </dd>
                        </dl>
                        <ul data-v-1cae2c34="" class="manNav">
                            <li data-v-1cae2c34="">
                                <a data-v-1cae2c34="" href="mymain" class="sel">订单管理</a>
                            </li>
                             <li data-v-1cae2c34="">
                                 <a data-v-1cae2c34="" href="myinfo" class="">个人信息</a>
                             </li>
                        </ul>
                    </div>
                </div>
                <div class="userInfoR right">

                    <div class="orderManage manage">
                        <div class="orderManageTit manageTit clear">
                            <div class="left tit">订单管理</div>
                            </div>
                        <div class="orderType clear type">
                            <div class="sel">全部订单</div>
                        </div>
                        <div class="orderList list">
                            <div class="orderListCom listCom" style="position: static;">
                                <table cellspacing="0" cellpadding="0">
                                    <tr class="firstTr">
                                        <th>订单号</th>
                                        <th>订单金额</th>
                                        <th>车型</th>
                                        <th>取车地址</th>
                                        <th>还车地址</th>
                                        <th>订单状态</th>
                                        <th>操作</th>
                                    </tr>
                                </table>
                                <div class="noData" >

                                    <table cellspacing="0" cellpadding="0" id="noda" class="table table-striped table-hover table-bordered">
                                        <tr class="firstTr" v-for="site in obj">
                                            <td>{{site.oid}}</td>
                                            <td>{{site.oprice}}</td>
                                            <td>{{site.cname}}</td>
                                            <td>{{site.getcity}}</td>
                                            <td>{{site.backcity}}</td>
                                            <td>{{site.ostatus}}</td>
                                            <td><button  @click="edit(site.oid)">修改</button>| <button @click="del(site.oid)">删除</button></td>
                                        </tr>
                                    </table>

                                    <div class="modal fade" id="modalModify">
                                        <div class="modal-dialog" >
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal">X</button>
                                                    <h4 class="modal-title">订单信息</h4>
                                                </div>
                                                <div class ="modal-body" >
                                                    <div class="input-group">
                                                        <span class="input-group-addon">订单号:</span>
                                                        <input class="input-sm" type="text" id="oid" placeholder="1" v-model="orderInfo.oid"/>
                                                    </div>
                                                    <br/>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">订单金额:</span>
                                                        <input class="input-sm" type="text" id="oprice" placeholder="1" v-model="orderInfo.oprice"/>
                                                    </div>
                                                    <br/>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">车型:</span>
                                                        <input class="input-sm" type="text" id="cname" placeholder="1" v-model="orderInfo.cname"/>
                                                    </div>
                                                    <br/>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">取车地址:</span>
                                                        <input class="input-sm" type="text" id="getcity" placeholder="1" v-model="orderInfo.getcity"/>
                                                    </div>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">还车地址:</span>
                                                        <input class="input-sm" type="text" id="backcity" placeholder="1" v-model="orderInfo.backcity"/>
                                                    </div>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">订单状态:</span>
                                                        <input class="input-sm" type="text" id="ostatus" placeholder="1" v-model="orderInfo.ostatus"/>
                                                    </div>
                                                </div>
                                                <div class = "modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
                                                    <button type="button" class="btn btn-primary" id="modify">修改</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="fenye"></div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-v-3aaf9db2="" class="footer2">
        <div data-v-3aaf9db2="" class="layout clear">
            <div data-v-3aaf9db2="" class="d1">
                <a data-v-3aaf9db2="" href="about.html">关于车速递</a></div></div></div>

   </div>

<script type="text/javascript">
    var totalCount =0;
    // var vv = {
    //     oid:1,
    //     oprice:205.0,
    //     cname:"名爵MG5",
    //     getcity:"天河客运站店",
    //     backcity:"机场服务点",
    //     ostatus:"已预订",
    //     total:10};

    var onevm = new Vue({
        el:'#modalModify',
        data:{
            orderInfo:{'oid':'123', 'oprice':'1234', 'cname':'1234', 'getcity':'123', 'backcity':'12', 'ostatus':'1'},
        }
    });

    var vm = new Vue({
        el:'#noda',
        data:{
            obj:[onevm.orderInfo],
        },
        methods:{
            edit:function(id){
                // alert("edit"+id);
                $.ajax({
                    url:'/carsys/order/getOrderbyid/'+id,
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        // var obj;
                        // //判断是否是json格式
                        // if ((typeof res== 'object' )&&res.constructor==Object){
                        //     obj=res;
                        // } else {
                        //     obj  = eval( "(" +res+ ")" );
                        // }
                        if(res.statusCode==200){
						    // console.log(res.data);
                            onevm.orderInfo = res.data;//将id查询的对象赋予和模态狂绑定数据
                            console.log(onevm.orderInfo)
                            $("#modalModify").modal("show");//显示模态框
                        }
                    }
                });
            },
            del:function(id){
                // alert("del"+id);
                $.ajax({
                    url:'/carsys/order/delOrder?id='+id,
                    type:"delete",
                    dataType:'json',
                    success:function(res){
                        if(res.statusCode==200){
                            alert("ok:"+res.msg);
                            window.location.href = ("mymain.html");//重新加载数据
                        }
                    }

                });
            }
        }
    });

    $("#modify").click(function(){
        alert("close");
        $.ajax({
            url:'/carsys/order/modify',
            type:'PUT',
            data: JSON.stringify(onevm.orderInfo),  //将json对象转为json字符串
            contentType:'application/json',
            dataType:'json',
            success:function(res){
                if(res.statusCode==200){
                    alert(res.msg);
                    $("#modalModify").modal("hide");//关闭模态框
                    window.location.href = ("mymain.html");//重新加载数据
                }
            }
        });

    })

    $(function () {
        loadData(1);
    })
    function loadData(page) {
        var user = JSON.parse(sessionStorage.getItem("loginUser"));
        $.ajax({
            type:"get",
            url:"/carsys/order/all?page="+page,
            data:user,
            dataType:"json",
            async:false,
            // alert("1");
            success:function(data){
                //id为0时为父类
                if(data.statusCode==200){
                    var totalCount1 =0;
                    for (i in data.data){
                        totalCount1+=1;
                    }
                    totalCount=totalCount1;
                    vm.obj = data.data;

                    // alert(totalCount);
                } else{
                    alert(data.data);
                }
            },
            error:function () {
                alert("ajax加载错误");
            }
        })
    }

    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage
            , layer = layui.layer;
        var currentPage = 1;
        var limit = 10;
        //总页数大于页码总数
        laypage.render({
            elem: 'fenye'
            , count: totalCount //数据总数
            , curr:currentPage
            , limit:limit
            , jump: function (obj, first) {
                /*console.log(obj)*/
                currentPage = obj.curr;
                limt = obj.limit;

                loadData(currentPage);

            }
        });

    });


</script>

</body>
</html>